<template>
  <div class="question">
    <!-- 顶部导航 -->
    <div class="topnav">
      <!-- 城市选择 -->
      <van-dropdown-menu>
        <van-dropdown-item ref="item">
          <template #title>
            <span class="title">面试宝典</span>
            <span class="city">{{ city }}</span>
          </template>
          <template #default>
            <van-index-bar>
              <template v-for="(value, key, index) in cityList">
                <van-index-anchor :key="index" :index="key">
                  {{ key }}
                </van-index-anchor>
                <van-cell
                  v-for="(item, index) in value"
                  :key="index"
                  :title="item"
                  @click="onSlect(item)"
                />
              </template>
            </van-index-bar>
          </template>
        </van-dropdown-item>
      </van-dropdown-menu>
      <!-- 题目选择 -->
      <div class="scroll-wrap">
        <div class="content">
          <van-tag
            round
            size="medium"
            @click="onClick(index)"
            v-for="(item, index) in typeList[city]"
            :key="index"
            v-model="isActive"
            :class="isActive === index ? 'active' : ''"
            >{{ item.name }}</van-tag
          >
        </div>
      </div>
    </div>
    <!-- 试题内容 -->
    <div class="contentBox">
      <div class="question_bank">
        <div class="item err">
          <i class="iconfont iconicon_mine_cuoti"></i>
          <div>常错题库</div>
        </div>
        <div class="item collect">
          <i class="iconfont iconicon_mine_tikushoucang"></i>
          <div>收藏题库</div>
        </div>
        <div class="item business">
          <i class="iconfont iconicon_mine_qiyeshoucang"></i>
          <div>企业题库</div>
        </div>
        <div class="item answered">
          <i class="iconfont iconicon_mine_mianjing"></i>
          <div>以答题库</div>
        </div>
        <div class="item order">
          <van-circle
            v-model="currentRate"
            :rate="rate"
            :stroke-width="70"
            size="120px"
            :seepd="20"
            :color="gradientColor"
            :speed="80"
          >
            <template #default>
              <div class="orderBox">
                <h3>顺序刷题</h3>
                <animate-number from="0" to="47"></animate-number>
                <span>/</span>
                <animate-number from="0" to="126"></animate-number>
              </div>
            </template>
          </van-circle>
        </div>
      </div>
      <!-- 收录试题 -->
      <div class="allCollection">
        <h3>累计收录</h3>
        <animate-number from="0" to="126"></animate-number>
      </div>
      <!-- 开始测试 -->
      <div class="startBtn">
        <button
          @click="$router.push(`/interview/${city}/${typeId}`)"
          class="btn"
        >
          模拟面试
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import { interFilters } from '@/api/api.js'
export default {
  data () {
    return {
      // 所有城市
      cityList: {},
      // 选择的城市
      city: '全国',
      // 试题类型id
      typeId: 355,
      // 城市试题类型列表
      typeList: {},
      // 试题类型下标
      isActive: 0,
      gradientColor: {
        '0%': 'rgba(228,1,55,0.3)',
        '100%': 'rgba(228,1,55,0.7)'
      },
      currentRate: 0,
      rate: 35,
      obj: {},
      startnum: 0,
      endnum: 126
    }
  },
  created () {
    // 打开页面获取城市信息
    this.getCity()
    this.$toast.loading({
      message: '加载中...',
      forbidClick: true
    })
  },
  methods: {
    // 获取试题统计数据索引
    async getCity () {
      const res = await interFilters()
      // console.log(res)
      // 获取城市数据
      this.cityList = res.data.data.citys
      // 获取试题种类数据
      this.typeList = res.data.data.cityPositions
    },
    // 试题类型点击事件
    onClick (index) {
      // this.isActive = true

      this.isActive = index
      // 获取城市列表
      const cityarr = this.typeList[this.city]
      // 获取试题类型id
      this.typeId = cityarr[index].id
      console.log(this.typeId)
    },
    // 选择城市
    onSlect (item) {
      // console.log(item)
      this.city = item

      const choosecity = this.typeList[item]
      // 默认获取城市试题列表下第一个考题类型
      this.typeId = choosecity[0].id
      this.$refs.item.toggle()
    }
  }
}
</script>

<style lang="less" scoped>
.question {
  width: 100%;
  .topnav {
    /deep/.van-dropdown-menu__bar {
      box-shadow: none;
      /deep/.van-dropdown-menu__title::after {
        border-color: transparent transparent #d12d3e #d12d3e;
      }
    }
    .title {
      color: #222;
      font-size: 18px;
    }
    .city {
      margin-left: 5px;
      color: #545671;
      font-size: 12px;
    }
    /deep/.van-index-anchor {
      font-size: 12px;
      color: #939393;
      background-color: #f7f4f5;
    }
  }
  .scroll-wrap {
    width: 100%;
    overflow-x: scroll;
    &::-webkit-scrollbar {
      display: none;
    }
    .content {
      display: flex;
      padding: 15px 20px;
      .van-tag {
        padding: 7px 12px;
        margin-right: 10px;
        background: #fff;
        color: #545671;
        flex-shrink: 0;
      }
      .active {
        color: #fff;
        background: #00b8d4;
      }
    }
  }
  .contentBox {
    position: relative;
    .question_bank {
      .item {
        position: absolute;
        font-size: 12px;
        text-align: center;
        color: #545671;
        i {
          display: inline-block;
          height: 42px;
          width: 42px;
          font-size: 25px;
          line-height: 42px;
          color: #fff;
          border-radius: 30px;
          margin-bottom: 10px;
        }
      }
      .err {
        top: 40px;
        left: 40px;
        i {
          background: linear-gradient(180deg, #ff8080, #ff4949);
        }
      }
      .collect {
        top: 40px;
        right: 40px;
        i {
          background: linear-gradient(180deg, #ffda05, #ffb302);
        }
      }
      .business {
        top: 130px;
        left: 40px;
        i {
          background: linear-gradient(180deg, #00ddec, #00b8d4);
        }
      }
      .answered {
        top: 130px;
        right: 40px;
        i {
          background: linear-gradient(180deg, #3ee5b1, #1dc779);
        }
      }
      .order {
        top: 50px;
        left: 50%;
        transform: translateX(-50%);
        width: 120px;
        height: 120px;
        .van-circle {
          padding: 12.5px;
          &::after {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            background-image: url(~@/assets/circleBg.png);
            background-size: 100%;
          }
          .orderBox {
            padding: 10px 0;
            width: 95px;
            height: 95px;
            color: #fff;
            border-radius: 50%;
            background: linear-gradient(180deg, #ff6f92, #e40137);
            font-size: 14px;
            h3 {
              margin-bottom: 15px;
            }
            span {
              font-size: 16px;
            }
          }
        }
      }
    }
    .allCollection {
      position: absolute;
      top: 255px;
      left: 50%;
      transform: translateX(-50%);
      text-align: center;
      span {
        display: block;
        margin-top: 20px;
        font-weight: 500;
        font-size: 30px;
      }
    }
  }
  .startBtn {
    position: absolute;
    top: 430px;
    left: 50%;
    transform: translateX(-50%);
    .btn {
      position: absolute; /*绝对对位*/
      top: 80%; /*距上部*/
      left: 50%;
      transform: translate(-50%, -50%); /*移动，根据X,Y轴*/
      width: 350px; /*宽*/
      height: 50px; /*高*/
      text-align: center; /*字体水平居中*/
      font-size: 20px; /*字体大小*/
      line-height: 50px; /*行高*/
      color: #fff;
      text-transform: uppercase; /*字体大写*/
      text-decoration: none; /*字体增加装饰：去除下划线*/
      font-family: sans-serif; /*非衬线体*/
      box-sizing: border-box; /*盒模型大小规则*/
      background: linear-gradient(
        90deg,
        #03a9f4,
        #f441a5,
        #ffeb3b,
        #03a9f4,
        #f441a5,
        #ffeb3b,
        #03a9f4
      ); /*渐变背景*/
      border-radius: 60px; /*边框圆角*/
      background-size: 400%; /*背景大小*/
      z-index: 1; /*层叠定位*/
      border: none;
    }
    .btn {
      animation: animate 8s linear infinite alternate; /*动画: 名称 时间 线性 循环 播放完回退播放*/
    }
    @keyframes animate {
      0% {
        background-position: 0%; /*修改背景定位，实现渐变色炫光*/
      }
      50% {
        background-position: 100%;
      }
      100% {
        background-position: 0%;
      }
    }
    .btn::before {
      /*之前添加*/
      content: ''; /*内容*/
      position: absolute; /*绝对定位*/
      top: -5px; /*当设置对立的2个定位属性时，元素的大小将由对立的大小决定*/
      left: -5px;
      right: -5px;
      bottom: -5px; /*当设置对立的2个定位属性时，元素的大小将由对立的大小决定*/
      z-index: -1;
      background: linear-gradient(
        90deg,
        #03a9f4,
        #f441a5,
        #ffeb3b,
        #03a9f4,
        #f441a5,
        #ffeb3b,
        #03a9f4
      );
      border-radius: 40px;
      background-size: 400%;
      filter: blur(20px); /*过渡：模糊*/
      opacity: 0; /*透明度*/
      transition: 1s; /*过渡时间*/
    }
    .btn::before {
      filter: blur(20px);
      opacity: 1;
      animation: animate 8s linear infinite; /*注意动画名称统一*/
    }
  }
}
</style>
